<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
	/*
		对元素的增删改查
		1: 新增文本节点 ： document.createTextNode();
		2: 新增元素节点 : document.createElement();
		3: 插入节点：appendChild()  insertBefore()
		4: 删除节点：removeChild()
		5: 替换节点：replaceChild()
	*/
	window.onload = function() {
		//创建文本节点
		var txtNode = document.createTextNode("有吃有喝有电脑,生活多美好");
		var t = document.querySelector("#div1");
		t.appendChild(txtNode);
		
		//创建元素节点(包括添加元素文本内容和属性)
		var elementNode = document.createElement("p");
		elementNode.innerText = "我是第三个P";
		elementNode.setAttribute("id", "p3");
		t.appendChild(elementNode);
		
		//获取新添加元素节点的属性
		var p3 = document.querySelector("#p3");
		console.log("p3.id : "+p3.id);
		
		//插入节点
		var p0 = document.createElement("p");
		p0.innerHTML = "我是第零个P";
		p0.id = "p0";
		//在某个元素之前插入
		t.insertBefore(p0, document.querySelector("#p1"));
		
		//替换元素
		var p2 = document.querySelector("#p2");
		var newP2 = document.createElement("p");
		newP2.innerText = "这是新的第二个P";
		newP2.id = "p2";
		t.replaceChild(newP2, p2);
		
		//删除元素
		t.removeChild(document.querySelector("#p2"));
	}
</script>
</head>
<body>
	<div id="div1">
		<p id="p1">我是第一个P</p>
		<p id="p2">我是第二个P</p>
	</div>
</body>
</html>